<!DOCTYPE html>
<!-- saved from url=(0071)https://tmpl.downzz.com/sucai/yanshi/code_demo/cyjpf1b6ksodg/index.html -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style data-merge-styles="true"></style>
    <style data-merge-styles="true"></style>
    <style data-merge-styles="true"></style>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>日志查询系统登录</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/login.css">

    <style type="text/css">
        .demo-login-container {
            width: 320px;
            margin: 21px auto 0;
        }

        #canvas {
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }

        @keyframes caretBlink {
            from {
                opacity: 1.0;
            }
            to {
                opacity: 0.0;
            }
        }

        @keyframes rotateSpinner {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        #en-markup-loading-spinner img {
            position: relative;
            top: 0px;
            left: 0px;
            animation-name: rotateSpinner;
            animation-duration: 0.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        #en-markup-alert-container .cell-3 button {
            position: absolute;
            top: 12px;
            right: 15px;
            width: 110px;
            height: 36px;
        }

        /* 覆盖login.css中的样式 */
        .layui-form .layui-input-wrap {
            position: relative !important;
            display: flex !important;
            min-height: 38px !important;
            padding: 0 !important;
            margin-right: 0 !important;
            border-radius: 4px !important;
            border: 1px solid #e6e6e6 !important;
            transition: all .3s !important;
        }

        .layui-form .layui-input-wrap:hover,
        .layui-form .layui-input-wrap:focus-within {
            border-color: #009688 !important;
            box-shadow: 0 0 5px rgba(0, 150, 136, 0.1) !important;
        }

        .layui-form .layui-input-prefix {
            position: absolute !important;
            left: 10px !important;
            top: 0 !important;
            bottom: 0 !important;
            width: 30px !important;
            border-right: none !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background-color: transparent !important;
        }

        .layui-form .layui-input-prefix i {
            font-size: 16px !important;
            color: #999 !important;
        }

        .layui-form .layui-input {
            display: block !important;
            width: 100% !important;
            padding-left: 55px !important;
            height: 38px !important;
            line-height: 38px !important;
            border: none !important;
            background-color: #fff !important;
            border-radius: 4px !important;
            outline: none !important;
        }

        /* 修复右侧小眼睛和清除按钮 */
        .layui-form .layui-input-affix {
            position: absolute !important;
            right: 10px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 11 !important;
        }

        .layui-form .layui-input-affix i {
            cursor: pointer !important;
            font-size: 16px !important;
            color: #999 !important;
            transition: color 0.3s !important;
        }

        .layui-form .layui-input-affix i:hover {
            color: #666 !important;
        }

        /* 确保输入框正确应用内边距，避免文字遮挡图标 */
        .layui-form .layui-input[lay-affix="eye"],
        .layui-form .layui-input[lay-affix="clear"] {
            padding-right: 35px !important;
        }

        .button-login {
            background-color: #00997a;
        }
    </style>
</head>
<body inmaintabuse="1">
<!-- 粒子背景 -->
<div id="particles-js">
    <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1444" height="928"></canvas>
</div>
<!-- 登录表单 -->
<form class="layui-form login-form layui-panel" autocomplete="off">
    <div class="demo-login-container">
        <h1 class="login-title">
            <img style="height: 30px" src="/static/img/logo.png" alt="logo">
            <span>日志系统 用户登录</span>
        </h1>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="userName" value="" lay-verify="required" placeholder="用户名"
                       lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="passWord" value="" lay-verify="required" placeholder="密   码"
                       lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-item">
                <!-- 滑动验证 https://www.layui1.com/extend/120.html-->
                <label class="layui-form-label">滑动验证</label>
                <div class="layui-input-block">
                    <div id="slider"></div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid button-login" lay-submit lay-filter="formDemo">登录</button>
        </div>
    </div>
</form>
<script src="/static/layui/layui.js"></script>
<script src="/static/layui/jquery-3.7.1.min.js"></script>
<script src="/static/js/particles.js"></script>
<script src="/static/js/sliderVerify.js"></script>

<script>
    //一般直接写在一个js文件中
    layui.config({
        base: 'dist/sliderVerify/'
    }).use(['sliderVerify', 'jquery', 'form'], function () {
        var sliderVerify = layui.sliderVerify,
            form = layui.form;
        var slider = sliderVerify.render({
            elem: '#slider',
            bg: 'button-login',//自定义背景样式名
            onOk: function () {//当验证通过回调
                layer.msg("滑块验证通过");
            }
        })

        // 监听回车键事件
        $(document).keypress(function(e) {
            if (e.which == 13) { // 13 是回车键的键码
                $('.button-login').click(); // 触发登录按钮的点击事件
            }
        });

        //监听提交
        form.on('submit(formDemo)', function (data) {
            if (!slider.isOk()) {//用于表单验证是否已经滑动成功
                layer.msg("请先通过滑块验证");
                return false;
            }

            $.ajax({
                url: "/sys/login",
                type: "POST",
                data: data.field,
                success: function (res) {
                    // console.log(res);
                    if (res.code === 0) {
                        layer.msg(res.msg || "登录成功", {
                            offset: '15px',
                            icon: 6
                        });
                        // 存入token
                        localStorage.setItem("log_token", res.data.token);

                        // 设置短暂延时确保token保存完成
                        setTimeout(function () {
                            window.location.href = "/index";
                        }, 1000);
                    } else {
                        layer.msg(res.msg || "登录失败", {
                            offset: '15px',
                            icon: 5
                        });
                    }
                },
                error: function (xhr, status, error) {
                    layer.msg("登录请求失败：" + error, {
                        offset: '15px',
                        icon: 5
                    });
                }
            });
            return false; // 阻止默认 form 跳转
        });

    })

</script>

</body>

</html>



<script>
    <!-- 在JavaScript中，可以通过覆盖document.cookie的setter来防止新cookie的创建。 -->
    Object.defineProperty(document, 'cookie', {
        set: function () {
            console.log("Attempt to set cookie blocked.");
        }
    });
</script>
